<template>
  <div class="categories">
    <!-- 商品分类 -->
    <my-bread :breadList="breadList"></my-bread>
    <el-card>
      <el-button @click="addCateFn">添加分类</el-button>

      <tree-table
        :data="splist"
        :columns="defaultProps"
        :selection-type="false"
        :expand-type="false"
        index-text="索引"
        :show-row-hover="false"
        show-index
        border
      >
        <!-- 是否有效 -->
        <template slot="isok" slot-scope="scope">
          <i
            class="el-icon-success"
            style="color: lightgreen"
            v-if="scope.row.cat_deleted === false"
          ></i>
        </template>
        <!-- 排序 -->
        <template slot="sorts" slot-scope="scope">
          <el-tag :type="scope.row.cat_level|typecolor" > {{ scope.row.cat_level | level }} </el-tag>
        </template>
        <!-- 操作 -->
        <template slot="caozuo" slot-scope="scope">
          <el-button type="primary" size="mini" @click="editCateBtn(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="delCateBtn(scope.row)">删除</el-button>
        </template>
      </tree-table>
       <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="getCateParams.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-card>
     <!-- 编辑模态框 -->
    <el-dialog title="编辑分类" :visible.sync="isEditCateMask">
      <el-form :model="editForm" :rules="editFormRules">
        <el-form-item label="活动名称" label-width="80px" prop="cat_name">
          <el-input v-model="editForm.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isEditCateMask = false">取 消</el-button>
        <el-button type="primary" @click="isEditCateOk">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加分类 -->
    <el-dialog title="添加分类" :visible.sync="dialogAddFormVisible">
  <el-form :model="addform">
    <el-form-item label="分类名称" :label-width="formLabelWidth">
      <el-input v-model="addform.cat_name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="父级分类" :label-width="formLabelWidth">
     <el-cascader
     v-model="addform.cat_pid"
    :options="splist2"
    :props="addFormdefaultProps"
    clearable></el-cascader>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogAddFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </div>
</el-dialog>     
  </div>
</template>

<script>
import {categories,addcategories} from "@/http/goods.js"
export default {
  data() {
    return {
      editForm: {},
      editFormRules: {
          cat_name: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }]
        },
        isEditCateMask: false,
      breadList:[
        {
          "path":"/home",
          "title":"首页"
        },
        {
          "path":"/goods",
          "title":"商品管理"
        },
        {
          "path":"/categories",
          "title":"商品分类"
        }
      ],
      splist: [],
      splist2:[],
      currentPage4: 4,
      getCateParams:{
        pagenum:1,
        pagesize:5
      },
      total:0,
      defaultProps: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        {
          label: "是否有效",
          // 表示当前列为模板列
          type: "template",
          // 表示当前这一列的模板名称
          template: "isok",
        },
        {
          label: "排序",
          type: "template",
          template: "sorts",
        },
        {
          label: "操作",
          type: "template",
          template: "caozuo",
        },
      ],
      dialogAddFormVisible:false,// 添加分类
      formLabelWidth:"120px",
      addform:{
        cat_name:"",
        cat_pid:"",//父级id 不能为空，如果要添加1级分类，则父分类Id应该设置为  `0`
        cat_level:""//分类层级 不能为空，`0`表示一级分类；`1`表示二级分类；`2`表示三级分类
      },
      
        addFormdefaultProps:{
          label:"cat_name",
          value:"cat_id",
          checkStrictly: true
        }
    };

  },

  mounted() {
    this.getCategoriesList();
  },
  methods: {
     // 编辑
      editCateBtn(val) {
        this.editForm = val
        console.log(val)
        this.isEditCateMask = true
        this.getCategoriesList();
      },
      // 确定按钮
      async isEditCateOk() {
        const res = await this.$API.editCateApi(this.editForm)
        this.getCategoriesList();
        this.isEditCateMask = false
        console.log(res)
      },
      // 删除
      delCateBtn(val) {
        this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(async () => {
            await this.$API.delCateApi(val.cat_id)
            this.getCategoriesList();
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
   async getCategoriesList(){
        let res= await categories(this.getCateParams);
        console.log(res);
        this.splist=res.data.result
        this.total =res.data.total
    },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.getCateParams.pagesize =val;
        this.getCategoriesList();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
         this.getCateParams.pagenum =val;
        this.getCategoriesList();
      },
    async addCate(){
      let length=this.addform.cat_pid.length ;
      let cat_pid=length ===0 ? 0 :this.addform.cat_pid[length-1];
      let cat_level=length ===0 ?0:length;
      let res = await addcategories( {
        "cat_name":this.addform.cat_name,
        "cat_pid":cat_pid,
        cat_level
      } )
   
    this.getCategoriesList()
     this.dialogAddFormVisible=false;
    },
    async addCateFn(){
        let res= await categories();
        console.log(res);
        this.splist2=res.data;
      this.dialogAddFormVisible=true;
    }
  },

};
</script>

<style lang="scss">
 .el-cascader-panel{
  height: 300px;
}
</style>